
.radar {
  background: -webkit-radial-gradient(center, rgb(245, 248, 248) 0%,
  rgba(32, 255, 77, 0) 75%),
  -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%,
          rgba(32, 255, 77, 0) 18%,
          #20ff4d 18.6%,
          rgba(32, 255, 77, 0) 18.9%),
  -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%,
          #20ff4d 50%,
          #20ff4d 50%,
          rgba(32, 255, 77, 0) 50.2%),
  -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%,
          #20ff4d 50%,
          #20ff4d 50%,
          rgba(32, 255, 77, 0) 50.2%);
  background: radial-gradient(center, rgb(253, 253, 253) 0%,
  rgba(32, 255, 77, 0) 75%),
  repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%,
  rgba(32, 255, 77, 0) 18%,
          #20ff4d 18.6%,
          rgba(32, 255, 77, 0) 18.9%),
  linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%,
          rgba(32, 255, 77, 0) 50.2%),
  linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%,
          #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
  width: 20vw;
  height: 20vw;
  max-height: 20vh;
  max-width: 20vh;
  position: absolute;
  left: 45%;
  top: -50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0.2rem solid #40ffff;
  overflow: hidden;
  opacity: 0.5;
}
.radar2 {
  background: -webkit-radial-gradient(center, rgb(44, 221, 198) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
  background: radial-gradient(center, rgb(32, 255, 198) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
  width: 20vw;
  height: 20vw;
  max-height: 20vh;
  max-width: 20vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0.2rem solid #40ffff;
  overflow: hidden;
  z-index:999;
  opacity: 0.7;
}
.radar:before {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /*animation: blips 5s infinite;*/
  animation-timing-function: linear;
  animation-delay: 1.4s;
}
.radar2:before {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /*animation: blips 5s infinite;*/
  animation-timing-function: linear;
  animation-delay: 1.4s;
}
.radar:after {
  content: ' ';
  display: block;
  background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #1ed4cd 100%);
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: radar-beam 5s infinite;
  animation-timing-function: linear;
  transform-origin: bottom right;
  border-radius: 100% 0 0 0;
}
.radar2:after {
  content: ' ';
  display: block;
  background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #1ed4cd 100%);
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: radar-beam 5s infinite;
  animation-timing-function: linear;
  transform-origin: bottom right;
  border-radius: 100% 0 0 0;
}

@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes blips {
  14% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #1ceebd 30%, rgba(255, 255, 255, 0) 100%);
  }
  14.0002% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #1fe5d4 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
  }
  25% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #23efbf 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
  }
  26% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #1feaba 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
  }
  100% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #1ee2bb 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
  }
}
